import React, { memo } from "react";
import { useState, useEffect, useRef, useCallback } from "react";
import { UploadWrapper } from "./style";
import { Upload, Button, message } from "antd";
import { AreaChartOutlined } from "@ant-design/icons";

export default memo(function AskUpload(pro) {
  const { setPictureInfo, isRefresh, updataRefreshState } = pro;
  const [fileList, setfileList] = useState([]);
  const [fileNameList, setfileNameList] = useState([]);
  let arr = [];
  const props = {
    name: "picture",
    action:
      "https://music9.top/api/yipianyue/momment/upload/picture?user_id=000000&article_id=84",
    onChange({ fileList }) {
      setfileList(fileList);
      for (const list of fileList) {
        let filename = [];

        if (list.response) {
         
          filename = list.response.img_info;
        }
     
        arr = [...arr, ...filename];
      }
      setfileNameList(arr);
      arr = [];
    },
    beforeUpload(file, fileList) {
      let isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        message.error("上传图片不能超过1M!");
        return false;
      }
    },
    defaultFileList: [],
  };

  useEffect(() => {
 
    setPictureInfo(fileNameList);
  }, [fileNameList]);

  useEffect(() => {

    if (isRefresh) {
      setfileList([]);
      updataRefreshState()
      setPictureInfo([]);

    }
  }, [isRefresh]);

  return (
    <UploadWrapper>
      <Upload
        className="upload-list-inline"
        listType="picture"
        accept=".jpg, .jpeg, .png"
        multiple={true}
        maxCount={9}
        fileList={fileList}
        {...props}
      >
        <Button icon={<AreaChartOutlined />}></Button>
      </Upload>
    </UploadWrapper>
  );
});
